<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="regist.css" />
	</head>
	<body>
		<div class="form-group">
			<form action="" method="get">
				<label style="color: blue">欢迎注册会员</label>
				<br />
				<span>手机号码：</span>
				<input
					type="tel"
					name="phone"
					id="phone"
					required
					placeholder="11位手机号"
				/>
				<span id="phone-label" style="color: red">必填</span>
				<br />
				<span>创建密码：</span>
				<input
					type="password"
					name="password"
					id="password"
					required
					placeholder="8位密码"
				/>
				<span id="password-label" style="color: red">必填</span>

				<br />
				<span>创建邮箱：</span>
				<input
					type="email"
					name="email"
					id="email"
					required
					placeholder="例如:wustzz@sina.com"
				/>
				<span id="email-label" style="color: red">必填</span>
				<br />

				<div class="captcha-box">
					<label for="captcha-input">验证码：</label>
					<input
						type="text"
						id="captcha-input"
						class="captcha-input"
						autocomplete="off"
					/>
					<span id="captcha-img" class="captcha-img"></span>
					<button
						type="button"
						class="captcha-refresh"
						onclick="refreshCaptcha()"
						aria-setsize="1"
					>
						&#x21bb;
					</button>
				</div>
				<span>性别：</span>
				<input type="radio" name="gender" value="male" required />男
				<input type="radio" name="gender" value="female" required />女
				<br />
				<span>生日：</span>
				<input type="date" name="birthday" />
				<br />
				<span>年龄：</span>
				<input type="number" name="age" min="1" max="100" step="1" />
				<br />
				<span>籍贯：</span>
				<select name="province" id="p" size="1">
					<option value="">湖北</option>
					<option value="">北京</option>
					<option value="">上海</option>
					<option value="">广东</option>
					<option value="">湖南</option>
					<option value="">四川</option>
					<option value="">重庆</option>
					<option value="">河南</option>
					<option value="">山东</option>
					<option value="">河北</option>
					<option value="">辽宁</option>
				</select>
				<select name="" id="" size="1">
					<option value="武汉">武汉</option>
					<option value="宜昌">宜昌</option>
					<option value="襄阳">襄阳</option>
					<option value="荆州">荆州</option>
					<option value="黄冈">黄冈</option>
					<option value="孝感">孝感</option>
					<option value="十堰">十堰</option>
					<option value="随州">随州</option>
					<option value="荆门">荆门</option>
				</select>
				<br />
				<span>个人学历：</span>
				<select name="" id="" size="1">
					<option value="博士">博士</option>
					<option value="硕士">硕士</option>
					<option value="本科">本科</option>
					<option value="大专">大专</option>
					<option value="高中">高中</option>
					<option value="初中">初中</option>
					<option value="小学">小学</option>
				</select>
				<br />
				<span>月薪：</span>
				<input
					type="range"
					name="salary"
					id="salary"
					min="1000"
					max="100000000"
					step="100"
					value="5000"
				/>
				<span id="msg" class="tip"></span>
				<br />
				<span>个人爱好：</span>
				<label for="singing"
					><input type="checkbox" name="hobby" value="singing" id="singing" />
					唱歌</label
				>
				<label for="dancing"
					><input type="checkbox" name="hobby" value="dancing" id="dancing" />
					跑步</label
				>
				<label for="reading"
					><input type="checkbox" name="hobby" value="reading" id="reading" />
					游泳</label
				>
				<br />
				<span>个人照片：</span>
				<input type="file" name="photo" accept="image/*" />
				<img
					id="photo-preview"
					src=""
					alt="图片预览"
					style="display: none; max-width: 150px; margin-top: 10px"
				/>

				<br />
				<div style="display: flex; align-items: center">
					<span style="margin-right: 10px">个人简介： </span>
					<textarea name="intro" id="intro" cols="30" rows="10"></textarea>
				</div>
				<br />
				<input type="button" value="提交" />
				<input type="reset" value="重置" />
			</form>
		</div>

		<script>
			function randomCaptcha(len = 4) {
				const chars = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789";
				let str = "";
				for (let i = 0; i < len; i++) {
					str += chars.charAt(Math.floor(Math.random() * chars.length));
				}
				return str;
			}

			function refreshCaptcha() {
				// 将验证码显示在captcha-img元素中
				document.getElementById("captcha-img").textContent = randomCaptcha();
			}

			// 页面加载时自动生成一次验证码
			window.onload = function () {
				refreshCaptcha();

				// 初始化滑块值显示
				var msg = document.getElementById("msg");
				msg.innerHTML = document.getElementById("salary").value;
			};

			// 给id为salary的滑块添加oninput事件
			document.getElementById("salary").oninput = function () {
				document.getElementById("msg").innerHTML = this.value;
			};

			// 移除文件上传事件监听的代码，因为HTML中没有文件上传输入框，所以注释掉或者删除

			document
				.querySelector('input[type="file"][name="photo"]')
				.addEventListener("change", function () {
					var file = this.files[0];
					var preview = document.getElementById("photo-preview");
					if (file && file.type.startsWith("image/")) {
						var reader = new FileReader();
						reader.onload = function (e) {
							preview.src = e.target.result;
							preview.style.display = "block";
						};
						reader.readAsDataURL(file);
					} else {
						preview.src = "";
						preview.style.display = "none";
					}
				});
		</script>
	</body>
</html>
